<template>
  <div>
    <el-container>
      <el-aside width="300px">
        <el-form
          size="mini"
          class="miniForm"
          ref="form"
          :model="leftForm"
          label-width="80px"
        >
          <el-form-item class="flexBox" label="开始日期">
            <el-date-picker
              v-model="leftForm.date"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
            <el-button>查询</el-button>
          </el-form-item>
          <el-form-item class="flexBox" label="截止日期">
            <el-date-picker
              v-model="leftForm.date"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
            <el-button>全部</el-button>
          </el-form-item>
          <el-form-item label="申请单号">
            <el-input style="width: 150px" v-model="leftForm.user"></el-input>
          </el-form-item>
          <el-form-item label="配血状态">
            <el-select style="width: 150px" v-model="leftForm.region">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="住院号">
            <el-input style="width: 150px" v-model="leftForm.user"></el-input>
          </el-form-item>
          <el-form-item label="紧急程度">
            <el-select style="width: 150px" v-model="leftForm.region">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="输血性质">
            <el-select style="width: 150px" v-model="leftForm.region">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="配血时间">
            <el-select style="width: 150px" v-model="leftForm.region">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table
          :data="leftTableData"
          :height="leftheight"
          border
          style="width: 100%"
        >
          <el-table-column prop="date" label="申请单号" width="180">
          </el-table-column>
          <el-table-column prop="name" label="住院号" width="180">
          </el-table-column>
          <el-table-column prop="address" label="姓名"> </el-table-column>
          <el-table-column prop="address" label="床号"> </el-table-column>
          <el-table-column prop="address" label="血型"> </el-table-column>
          <el-table-column prop="address" label="状态"> </el-table-column>
        </el-table>
      </el-aside>
      <el-main>
        <el-container>
          <el-container>
            <el-aside width="870px">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>申请信息</span>
                </div>
                <el-form
                  label-width="90px"
                  :inline="true"
                  :model="userInfo"
                  class="miniForm"
                  size="mini"
                >
                  <el-form-item label="病人姓名">
                    <el-input
                      style="width: 100px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="病人性别">
                    <el-input
                      style="width: 100px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="年龄">
                    <el-input
                      style="width: 100px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="紧急程度">
                    <el-select v-model="userInfo.region" style="width: 100px">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <el-form
                  label-width="90px"
                  :inline="true"
                  :model="userInfo"
                  class="miniForm"
                  size="mini"
                >
                  <el-form-item label="反应史">
                    <el-input
                      style="width: 100px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="输血史">
                    <el-select v-model="userInfo.region" style="width: 100px">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="孕/产">
                    <el-input
                      style="width: 44px"
                      v-model="userInfo.user"
                    ></el-input>
                    /
                    <el-input
                      style="width: 44px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="妊娠史">
                    <el-select v-model="userInfo.region" style="width: 100px">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <el-form
                  label-width="90px"
                  :inline="true"
                  :model="userInfo"
                  class="miniForm"
                  size="mini"
                >
                  <el-form-item label="病人ABO">
                    <el-input
                      style="width: 100px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="输血性质">
                    <el-input
                      style="width: 100px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="住院号">
                    <el-input
                      style="width: 100px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="大量用血">
                    <el-input
                      style="width: 100px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <el-form
                  label-width="90px"
                  :inline="true"
                  :model="userInfo"
                  class="miniForm"
                  size="mini"
                >
                  <el-form-item label="病人RHD">
                    <el-input
                      style="width: 100px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="不规则抗体I">
                    <el-input
                      style="width: 100px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="II">
                    <el-input
                      style="width: 100px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="III">
                    <el-input
                      style="width: 100px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <el-form
                  label-width="90px"
                  :inline="true"
                  :model="userInfo"
                  class="miniForm"
                  size="mini"
                >
                  <el-form-item label="申请ABO">
                    <el-input
                      style="width: 100px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="用血时间">
                    <el-date-picker
                      style="width: 205px"
                      v-model="userInfo.user"
                      type="datetime"
                      placeholder="选择日期时间"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="申请时间">
                    <el-date-picker
                      style="width: 205px"
                      v-model="userInfo.user"
                      type="datetime"
                      placeholder="选择日期时间"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-form>
                <el-form
                  label-width="90px"
                  :inline="true"
                  :model="userInfo"
                  class="miniForm"
                  size="mini"
                >
                  <el-form-item label="用血备注">
                    <el-input
                      style="width: 718px"
                      v-model="userInfo.user"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </el-card>
            </el-aside>
            <el-main>
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>申请成分</span>
                </div>
                <el-table
                  :data="sqcfTableData"
                  height="200"
                  border
                  style="width: 100%"
                >
                  <el-table-column prop="date" label="代号"> </el-table-column>
                  <el-table-column prop="name" label="申请血液">
                  </el-table-column>
                  <el-table-column prop="address" label="数量">
                  </el-table-column>
                  <el-table-column prop="address" label="单位">
                  </el-table-column>
                </el-table>
              </el-card>
            </el-main>
          </el-container>
          <el-footer>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>条码与检测(配血编号:无)</span>
              </div>
              <el-form
                label-width="100px"
                :inline="true"
                :model="tmjcForm"
                class="miniForm"
                size="mini"
              >
                <el-form-item label="条码号">
                  <el-input
                    style="width: 220px"
                    v-model="tmjcForm.user"
                  ></el-input>
                </el-form-item>
                <el-form-item label="采集人">
                  <el-select style="width: 220px" v-model="tmjcForm.region">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="不规则抗体I">
                  <el-select style="width: 220px" v-model="tmjcForm.region">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <el-form
                label-width="100px"
                :inline="true"
                :model="tmjcForm"
                class="miniForm"
                size="mini"
              >
                <el-form-item label="签收人">
                  <el-select style="width: 220px" v-model="tmjcForm.region">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="采集时间">
                  <el-date-picker
                    style="width: 220px"
                    v-model="tmjcForm.region"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="不规则抗体II">
                  <el-select style="width: 220px" v-model="tmjcForm.region">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <el-form
                label-width="100px"
                :inline="true"
                :model="tmjcForm"
                class="miniForm"
                size="mini"
              >
                <el-form-item label="签收时间">
                  <el-date-picker
                    v-model="tmjcForm.region"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="复查血型">
                  <el-select style="width: 220px" v-model="tmjcForm.region">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="不规则抗体III">
                  <el-select style="width: 220px" v-model="tmjcForm.region">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <el-form
                label-width="100px"
                :inline="true"
                :model="tmjcForm"
                class="miniForm"
                size="mini"
              >
                <el-form-item label="鉴定人">
                  <el-select style="width: 220px" v-model="tmjcForm.region">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备注说明">
                  <el-input
                    v-model="tmjcForm.region"
                    style="width: 553px"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-card>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <el-button size="mini">新增</el-button>
                <el-button size="mini">保存</el-button>
                <el-button size="mini">刷新</el-button>
                <el-button size="mini">审核</el-button>
                <el-button size="mini">取消审核</el-button>
                <el-button size="mini">删除</el-button>
                <el-button size="mini">打印血袋条码</el-button>
                <el-button size="mini">打印配血单</el-button>
              </div>
              <el-table
                :data="footTableData"
                height="250"
                border
                style="width: 100%"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="date" label="血袋编号">
                </el-table-column>
                <el-table-column prop="name" label="血液成分">
                </el-table-column>
                <el-table-column prop="address" label="血袋血型"> </el-table-column>
                <el-table-column prop="address" label="规格"> </el-table-column>
                <el-table-column prop="address" label="单位"> </el-table-column>
                <el-table-column prop="address" label="审核标识"> </el-table-column>
                <el-table-column prop="address" label="移除标识"> </el-table-column>
                <el-table-column prop="address" label="发血标识"> </el-table-column>
                <el-table-column prop="address" label="退血标识"> </el-table-column>
                <el-table-column prop="address" label="配血方法"> </el-table-column>
                <el-table-column prop="address" label="配血结果"> </el-table-column>
                <el-table-column prop="address" label="配血人"> </el-table-column>
                <el-table-column prop="address" label="配血时间"> </el-table-column>
              </el-table>
            </el-card>
          </el-footer>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      leftForm: {},
      leftTableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      leftheight: window.innerHeight - 60 - 20 - 56 - 267,
      userInfo: {},
      sqcfTableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      tmjcForm: {},
      footTableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.miniForm {
  .el-form-item {
    margin-bottom: 5px;
  }
}
/deep/ .flexBox .el-form-item__content {
  display: flex !important;
}
</style>